<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>前端基础之CSS选择器 | 迷航</title>
<meta name="description" content="人可以迷失方向，但是不能停下脚步！">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://tingke.gitee.io/post/favicon.ico?v=1690805106645">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://tingke.gitee.io/post/styles/main.css">



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />



  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://tingke.gitee.io/post">
        <img src="https://tingke.gitee.io/post/images/avatar.png?v=1690805106645" class="site-logo">
        <h1 class="site-title">迷航</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="/archives" class="site-nav">
            归档
          </a>
        
      
        
          <a href="/tags" class="site-nav">
            标签
          </a>
        
      
        
          <a href="/post/about" class="site-nav">
            关于
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      人可以迷失方向，但是不能停下脚步！
    </div>
    <div class="site-footer">
      Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> Copyright © 2019 | <a class="rss" href="https://tingke.gitee.io/post/atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">前端基础之CSS选择器</h2>
            <div class="post-date">2020-07-04</div>
            
            <div class="post-content">
              <h2 id="0x00-简单认识css">0x00 简单认识CSS</h2>
<h3 id="1-什么是-css">1、什么是 CSS？</h3>
<p><code>CSS</code> 全称为 <code>Cascading Style Sheets</code>，中文翻译为“层叠样式表”，简称 CSS 样式表，所以称之为层叠样式表（Cascading Stylesheet）简称 CSS。在网页制作时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。</p>
<h3 id="2-css-的作用">2、CSS 的作用</h3>
<p>简单地来讲，CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。 样式是用来控制页面外观、设置元素对象属性的工具，使用样式可使页面产生各种特殊的效果。</p>
<h3 id="3-样式表书写位置">3、样式表书写位置</h3>
<pre><code class="language-html">&lt;head&gt;
	&lt;meta charset=&quot;UTF-8&quot;&gt;
	&lt;title&gt;Document&lt;/title&gt;
	&lt;style type=&quot;text/css&quot;&gt;
	    /* 样式表内容 */
	&lt;/style&gt;
&lt;/head&gt;
</code></pre>
<h2 id="0x01-选择器">0x01 选择器</h2>
<h3 id="什么是选择器">什么是选择器？</h3>
<p>选择器是一个选择标签的过程。</p>
<p>以下选择器会选取这个示例中出现举例</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;UTF-8&quot;&gt;
	&lt;title&gt;Document&lt;/title&gt;
	&lt;style type=&quot;text/css&quot;&gt;
		div{
			font-size: 50px;
			color: red
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;等你下课&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;我是一个box&lt;/div&gt;
    &lt;div id=&quot;box&quot;&gt;我也是一个box&lt;/div&gt;
    &lt;div&gt;&lt;div class=&quot;box&quot;&gt;大家都是box&lt;/div&gt;&lt;/div&gt;
    &lt;div&gt;我是谁？&lt;span&gt;我在哪？&lt;/span&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="基础选择器">基础选择器</h3>
<h4 id="标签选择器">标签选择器</h4>
<p>示例：</p>
<pre><code class="language-css">div {
    width: 100px;
}
</code></pre>
<p>特点：<br>
标签选择器定义之后，会将页面所有的元素都执行这个标签样式。</p>
<h4 id="类选择器重点">类选择器（重点）</h4>
<p>示例：</p>
<pre><code class="language-css">.box {
    width: 100px;
    height: 100px;
    background-color: red;
}
</code></pre>
<p>特点：<br>
一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。</p>
<p><strong>类选择器命名规则</strong></p>
<ol>
<li>不能用纯数字或者数字开头来定义类名；</li>
<li>不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名；</li>
<li>不建议使用汉字来定义类名；</li>
<li>不推荐使用属性或者属性的值来定义类名。</li>
</ol>
<p><strong>类选择器常用的命名</strong></p>
<pre><code>header：头部
content/contrainer：内容
footer：底部
nav：导航栏
sidebar：侧边栏
wrapper：外围包装
left：左
right：右
center：中
loginbar：登录条
logo：标志
banner：广告
main：主体
hot：热点
copyright：版权
</code></pre>
<h3 id="id选择器">ID选择器</h3>
<p>示例：</p>
<pre><code class="language-css">#box {
    width: 100px;
    height: 100px;
    background-color: red;
}
</code></pre>
<p>特点：</p>
<ul>
<li>一个 ID 选择器在一个页面只能使用一次。如果使用2次或者2次以上，不符合 w3c 规范，JS 调用会出问题。</li>
<li>一个标签只能使用一个 ID 选择器。</li>
<li>一个标签可以同时使用类选择器和 ID 选择器。</li>
</ul>
<h3 id="通配符选择器">通配符选择器</h3>
<p>示例：</p>
<pre><code class="language-css">* {
    color: #000;
    margin: 0;
    padding: 0;
}
</code></pre>
<p>特点：<br>
给所有的标签都使用相同的样式。<br>
PS：★不推荐使用，增加浏览器和服务器负担。</p>
<h2 id="复合选择器">复合选择器</h2>
<p>两个或者两个以上的基础选择器通过不同的方式连接在一起。</p>
<h4 id="交集选择器">交集选择器</h4>
<p>示例：</p>
<pre><code class="language-css">div.box {
    width: 100px;
    height: 100px;
    background-color: red;
}
</code></pre>
<p>特点：<br>
即要满足使用了某个标签，还要满足使用了类选择器或者ID选择器。</p>
<h4 id="后代选择器重点">后代选择器（重点）</h4>
<p>示例：</p>
<pre><code class="language-css">div span {
    width: 100px;
    height: 100px;
    background-color: red;
}
</code></pre>
<p>特点：</p>
<ul>
<li>后代选择器首选要满足包含（嵌套）关系。</li>
<li>父集元素在前边，子集元素在后边。</li>
<li>无限制隔代。（下面都会生效）</li>
<li>只要能代表标签，标签、类选择器、ID选择器自由组合。</li>
</ul>
<h4 id="子代选择器">子代选择器</h4>
<p>示例：</p>
<pre><code class="language-css">div&gt;span {
    width: 100px;
    height: 100px;
    background-color: red;
}
</code></pre>
<p>特点：<br>
选中直接下一代元素，下下一代就选不中了。</p>
<h4 id="并集选择器">并集选择器</h4>
<p>示例：</p>
<pre><code class="language-css">div, span, .box {
    color: red;
}
</code></pre>
<p>特点：</p>

            </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://tingke.gitee.io/post/post/e_CCmMcGI/">
                  <h3 class="post-title">
                    前端基础之认识前端
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script type="application/javascript">

AOS.init();

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>




  </body>
</html>
